<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>TESCO移动商城-首页</title>

    <!-- 1. 引入重置样式表 -->
    <link rel="stylesheet" href="./css/normalize.css" />

    <!-- 2. 引入字体图标样式表 -->
    <link rel="stylesheet" href="./lib/font/iconfont.css" />

    <!-- 3. 引入公共样式表 -->
    <link rel="stylesheet" href="./css/common.css" />

    <!-- 4. 引入插件样式表 -->
    <!-- swiper轮播插件 -->
    <link rel="stylesheet" href="./lib/swiper/swiper-bundle.min.css" />

    <!-- 5. 引入头部样式表 -->
    <link rel="stylesheet" href="./css/header.css" />

    <!-- 6. 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index.css" />

    <!-- 7. 引入页脚样式表 -->
    <link rel="stylesheet" href="./css/footer.css" />
  </head>

  <body class="flexDc jcsb mBody">
    <!-- 头部 -->
    <header class="flex aic fs16 cff bge43">
      <div class="menu tac">
        <i class="iconfont icon-menu fs26"></i>
      </div>
      <div class="search flex1 flex jcc">
        <input class="out-input on" type="text" placeholder="寻找你的宝贝" />
      </div>
      <div class="login">登录</div>
    </header>

    <!-- 主要内容 -->
    <main class="flex1 ofs">
      <!-- 海报 -->
      <div id="banner" class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="./images/banner01.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner02.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner03.jpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner04.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner05.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner06.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner07.dpg" alt="图片加载失败" />
          </div>
          <div class="swiper-slide">
            <img src="./images/banner08.dpg" alt="图片加载失败" />
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- 分类导航 -->
      <div id="category" class="swiper bsbb bgf1">
        <div class="swiper-wrapper c66">
          <div class="swiper-slide">
            <ul class="flex1 flex">
              <script>
                // 文字数据
                let span1 = [
                  "乐购超市",
                  "乐购电器",
                  "乐购服饰",
                  "乐购生鲜",
                  "乐购到家",
                ];
                for (let i = 1; i < 6; i++) {
                  document.write(`
                <li class="flex1 flexDc flexCsb">
                  <img src="./images/nav-icon-0${i}.webp" alt="图片加载失败" />
                  <span>${span1[i - 1]}</span>
                </li>
              `);
                }
              </script>
            </ul>
            <ul class="flex1 flex">
              <script>
                // 文字数据
                let span2 = ["充值缴费", "9.9元拼", "领券", "赚钱", "PLUS会员"];
                for (let i = 6; i < 11; i++) {
                  if (i === 10) {
                    document.write(`
                      <li class="flex1 flexDc flexCsb">
                        <img src="./images/nav-icon-${i}.webp" alt="图片加载失败" />
                        <span>${span2[i - 6]}</span>
                      </li>
                    `);
                  } else {
                    document.write(`
                      <li class="flex1 flexDc flexCsb">
                        <img src="./images/nav-icon-0${i}.webp" alt="图片加载失败" />
                        <span>${span2[i - 6]}</span>
                      </li>
                    `);
                  }
                }
              </script>
            </ul>
          </div>
          <div class="swiper-slide">
            <ul class="flex1 flex">
              <script>
                // 文字数据
                let span3 = [
                  "乐购国际",
                  "乐购拍卖",
                  "唯品会",
                  "玩3c",
                  "沃尔玛",
                ];
                for (let i = 11; i < 16; i++) {
                  document.write(`
                <li class="flex1 flexDc flexCsb">
                  <img src="./images/nav-icon-${i}.webp" alt="图片加载失败" />
                  <span>${span3[i - 11]}</span>
                </li>
              `);
                }
              </script>
            </ul>
            <ul class="flex1 flex">
              <script>
                // 文字数据
                let span4 = [
                  "美妆馆",
                  "乐购旅行",
                  "拍怕二手",
                  "物流查询",
                  "全部",
                ];
                for (let i = 16; i < 21; i++) {
                  document.write(`
                <li class="flex1 flexDc flexCsb">
                  <img src="./images/nav-icon-${i}.webp" alt="图片加载失败" />
                  <span>${span4[i - 16]}</span>
                </li>
              `);
                }
              </script>
            </ul>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- 乐购秒杀 -->
      <div id="seckill" class="w96 flexDc bgff bsbb">
        <div class="flex flexCsb">
          <div class="flex aib">
            <h2 class="fs20">乐购秒杀</h2>
            <p class="fwb">8点场</p>
            <span><i>00</i> : <i>36</i> : <i>42</i></span>
          </div>
          <div>
            <a class="ce43" href="#">
              更多秒杀
              <i class="iconfont icon-right-arrow fs12"></i>
            </a>
          </div>
        </div>
        <ul class="flex1 flex">
          <script>
            for (let i = 1; i < 6; i++) {
              document.write(`
                  <li class="flexDc flexC">
                    <img src="./images/seckill-img0${i}.dpg" alt="图片加载失败" />
                    <span class="ce43 fwb">￥ 1669</span>
                    <s>￥ 2329</s>
                  </li>
                `);
            }
          </script>
        </ul>
      </div>

      <!-- 新人优惠 -->
      <div id="newPerson" class="w96">
        <img src="./images/new-user01.dpg" alt="图片加载失败" /><img
          src="./images/new-user02.dpg"
          alt="图片加载失败"
        />
      </div>

      <!-- 每日逛标题 -->
      <div class="daily-title">
        <img src="./images/daily-shopping-title-img.dpg" alt="图片加载失败" />
      </div>

      <!-- 每日逛 -->
      <div id="daily" class="w96 flexDc">
        <ul class="flex1 flex">
          <script>
            let h31 = ["免息星球", "每日特价", "品牌闪购", "乐购直播"];
            let p1 = ["白条免息购", "9块9疯抢", "汇大牌好价", "好货即可买"];
            for (let i = 1; i < 5; i++) {
              document.write(`
                  <li class="flex1 flexDc aic bgff">
                    <div>
                      <h3 class="fs16 fwn">${h31[i - 1]}</h3>
                      <p>${p1[i - 1]}</p>
                    </div>
                    <img src="./images/daily-shopping-img0${i}.dpg" alt="图片加载失败" />
                  </li>
                `);
            }
          </script>
        </ul>
        <ul class="flex1 flex">
          <script>
            let h32 = ["排行榜", "拍拍好物", "新品首发", "发现好货"];
            let p2 = ["热销推荐", "二手优品", "新品大赏", "发现品质生活"];
            for (let i = 5; i < 9; i++) {
              document.write(`
                  <li class="flex1 flexDc aic bgff">
                    <div>
                      <h3 class="fs16 fwn">${h32[i - 5]}</h3>
                      <p>${p2[i - 5]}</p>
                    </div>
                    <img src="./images/daily-shopping-img0${i}.dpg" alt="图片加载失败" />
                  </li>
                `);
            }
          </script>
        </ul>
      </div>

      <!-- 乐购快报 -->
      <div id="news" class="w96 flex aic bgff">
        <h2 class="fs16">乐购快报</h2>

        <div id="newsBar" class="swiper flex1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <p>
                <span class="ce43">推荐</span>
                购买JavaScript宝典 学习无忧 嘿嘿嘿嘿嘿嘿嘿
              </p>
            </div>
            <div class="swiper-slide">
              <p>
                <span class="ce43">最热</span>
                学习烘焙很简单 入门工具要必备 哈哈哈哈哈哈哈
              </p>
            </div>
            <div class="swiper-slide">
              <p>
                <span class="ce43">HOT</span>
                程序员假发团购 劲爆价格 嘻嘻嘻嘻嘻嘻嘻嘻嘻
              </p>
            </div>
            <div class="swiper-slide">
              <p>
                <span class="ce43">你好</span>
                孤舟蓑立翁 独钓寒江雪 呵呵呵呵呵呵呵呵呵
              </p>
            </div>
            <div class="swiper-slide">
              <p>
                <span class="ce43">卡尔</span>
                在那黑色的无知之海上，吾乃闪耀的知识灯塔！ 啊啊啊啊啊啊啊啊啊啊
              </p>
            </div>
          </div>
        </div>

        <a class="c00" href="#">更多</a>
      </div>

      <!-- 为你推荐标题 -->
      <div class="recommend-title">
        <img src="./images/recommend-title-img.png" alt="图片加载失败" />
      </div>

      <!-- 为你推荐 -->
      <ul id="recommend" class="w96 flex jcsb fww fs16">
        <script>
          for (let i = 1; i < 7; i++) {
            document.write(`
                <li class="bgff bsbb">
                  <img src="./images/recommend-list-img0${i}.webp" alt="图片加载失败" />
                  <p class="ofh bsbb">
                    野狼军表钢带手表男士机械表 瑞士原装机械机芯 防水透底潜水表双历夜光
                    商务男士蓝黑綠水鬼手表V5.1 本色蓝面款-蓝光（晒单赠尼龙表带）
                  </p>
                  <p class="flex jcsb ce43">
                    <span>￥ 3800</span>
                    <button>看相似</button>
                  </p>
                </li>
              `);
          }
          for (let i = 1; i < 7; i++) {
            document.write(`
                <li class="bgff bsbb">
                  <img src="./images/recommend-list-img0${i}.webp" alt="图片加载失败" />
                  <p class="ofh bsbb">
                    野狼军表钢带手表男士机械表 瑞士原装机械机芯 防水透底潜水表双历夜光
                    商务男士蓝黑綠水鬼手表V5.1 本色蓝面款-蓝光（晒单赠尼龙表带）
                  </p>
                  <p class="flex jcsb ce43">
                    <span>￥ 3800</span>
                    <button>看相似</button>
                  </p>
                </li>
              `);
          }
        </script>
      </ul>

      <!-- 底线 -->
      <div id="bottom-line" class="w96 flex aic c33">
        <span></span>
        <p class="tac">已经到底了</p>
        <span></span>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="flex c8b">
      <a class="flex1 flexDc aic c8b" href="./index.html">
        <i class="iconfont icon-index fs20"></i>
        <span>首页</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./category.html">
        <i class="iconfont icon-classification fs20"></i>
        <span>分类</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./shopCar.html">
        <i class="iconfont icon-shop-car fs20"></i>
        <span>购物车</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./my.html">
        <i class="iconfont icon-my fs20"></i>
        <span>我的</span>
      </a>
    </footer>

    <!-- 页面特效部分 -->

    <!-- 1. 引入jQuery -->
    <script src="./js/jquery-3.7.1.min.js"></script>

    <!-- 2. 引入validate -->
    <script src="./js/jquery.validate.js"></script>

    <!-- 3. 引入插件 -->
    <!-- swiper轮播插件 -->
    <script src="./lib/swiper/swiper-bundle.min.js"></script>

    <!-- 4. 引入公共js -->
    <script src="./js/common.js"></script>

    <!-- 5. 引入首页js -->
    <script src="./js/index.js"></script>
  </body>
</html>
